<template>
  <div class="total" id="total" style="width:100%;height:63px"></div>
</template>
<script>
export default {
  mounted () {
    this.initTotal();
  },
  methods: {
    initTotal () {
      const RICH = {
        name: {
          color: '#fff',
          fontSize: 20
        //   lineHeight: 20,
        },
        basic: {
          color: '#fff',
          fontSize: 12
        //   lineHeight: 12,
        }
      };
      const total = this.$echarts.init(document.getElementById('total'));
      const option = {
        series: [
          {
            type: 'treemap',
            width: '100%',
            height: '100%',
            left: 0,
            top: 0,
            roam: false, // 是否开启拖拽漫游（移动和缩放）
            nodeClick: false, // 点击节点后的行为,false无反应
            itemStyle: {
              show: true,
              borderWidth: 1,
              borderColor: '#fff'
            },
            label: {
              show: true,
              position: 'insideCenter ',
              formatter: function (a) {
                return '{Name|' + a.name + '}' + '\n\n' + '{basic|' + a.data.title + '}';
              },
              textStyle: {
                color: '#fff',
                fontSize: '18'
              },
              rich: RICH
            },
            data: [
              {
                title: '利润',
                name: '2,781,301.53',
                value: 1,
                itemStyle: {
                  color: 'rgb(113, 102, 158)'
                }
              },

              {
                title: '成本',
                name: '17,595,857.04',
                value: 1,
                itemStyle: {
                  color: 'rgb(143, 211, 232)'
                }
              },

              {
                title: '数量',
                name: '33,684',
                value: 1,
                itemStyle: {
                  color: 'rgb(224, 152, 199)'
                }
              },
              {
                title: '价格',
                name: '20,377,158.57',
                value: 1,
                itemStyle: {
                  color: 'rgb(155, 139, 186)'
                }
              }
            ],
            breadcrumb: {
              show: false
            }
          }
        ]
      };

      option && total.setOption(option);
      window.onresize = function () {
        total.resize();
      };
    }
  }
};
</script>

<style lang="less" scoped>
</style>